<template>
  <div class="baidu-map-container tech-theme">
    <div ref="mapContainer" class="map-container tech-map"></div>
    
    <!-- 科技感控制面板 -->
    <div class="map-controls tech-controls" v-if="showControls">
      <div class="control-panel-header">
        <div class="panel-title"><span class="title-text">地图控制</span></div>
        <div class="panel-glow"></div>
      </div>
      
      <div class="control-content">
        <div class="control-item tech-select">
          <el-select 
            v-model="selectedCity" 
            placeholder="选择城市" 
            size="small" 
            @change="onCityChange"
            class="city-selector"
          >
            <el-option
              v-for="city in cities"
              :key="city.name"
              :label="city.name"
              :value="city.name"
            />
          </el-select>
        </div>
        
        <div class="control-item tech-buttons">
          <el-button-group size="small" class="control-group">
            <el-button @click="zoomIn" :icon="Plus" class="tech-btn zoom-in" />
            <el-button @click="zoomOut" :icon="Minus" class="tech-btn zoom-out" />
            <el-button @click="resetCenter" :icon="Location" class="tech-btn reset" />
          </el-button-group>
        </div>
        
        <div class="control-item tech-stats">
          <div class="stat-item">
            <span class="stat-label">站点总数</span>
            <span class="stat-value">{{ markers.length }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">缩放级别</span>
            <span class="stat-value">{{ currentZoom }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 科技感应信息面板 -->
    <div class="map-info tech-info" v-if="showInfo">
      <div class="info-panel-header">
        <div class="panel-title"><span class="title-text">位置信息</span></div>
        <div class="panel-glow"></div>
      </div>
      
      <div class="info-content">
        <div class="info-item tech-item">
          <div class="info-icon"><span class="icon-glow">🏙️</span></div>
          <div class="info-data">
            <span class="info-label">当前城市</span>
            <span class="info-value">{{ currentCity }}</span>
          </div>
        </div>
        
        <div class="info-item tech-item">
          <div class="info-icon"><span class="icon-glow">📍</span></div>
          <div class="info-data">
            <span class="info-label">坐标</span>
            <span class="info-value">{{ currentCoordinates }}</span>
          </div>
        </div>
        
        <div class="info-item tech-item">
          <div class="info-icon"><span class="icon-glow">🔋</span></div>
          <div class="info-data">
            <span class="info-label">最近站点</span>
            <span class="info-value">{{ nearestStation }}</span>
          </div>
        </div>
      </div>
      
      <div class="panel-decoration"></div>
    </div>
    
    <!-- 科技感粒子效果背景 -->
    <div class="particles-container" v-if="showParticles">
      <div v-for="n in 20" :key="n" class="particle" :class="`particle-${n}`"></div>
    </div>
    
    <!-- 科技感扫描线效果 -->
    <div class="scanning-line" v-if="showScanning"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { Plus, Minus, Location } from '@element-plus/icons-vue'

interface Props {
  ak: string // 百度地图API密钥
  center?: [number, number] // 初始中心点坐标 [lng, lat]
  zoom?: number // 初始缩放级别
  showControls?: boolean // 显示控制按钮
  showInfo?: boolean // 显示信息面板
  showParticles?: boolean // 显示粒子效果
  showScanning?: boolean // 显示扫描线效果
  markers?: Array<{
    name: string
    position: [number, number]
    capacity: string
    type: string
    city: string
  }> // 标记点数据
}

interface Emits {
  (e: 'markerClick', marker: any): void
  (e: 'cityChange', city: string): void
}

const props = withDefaults(defineProps<Props>(), {
  ak: 'eaV8OIruO7nXlIMKMu5I0OTZLd9YScpa',
  center: () => [116.4074, 39.9042], // 北京
  zoom: 10,
  showControls: true,
  showInfo: true,
  showParticles: true,
  showScanning: true,
  markers: () => []
})

const emit = defineEmits<Emits>()

const mapContainer = ref<HTMLElement | null>(null)
const map = ref<any>(null)
const selectedCity = ref('')
const currentCity = ref('北京市')
const currentCoordinates = ref('116.4074°E, 39.9042°N')
const currentZoom = ref(10)
const nearestStation = ref('北京储能站')

// 中国主要城市数据
const cities = [
  { name: '北京市', coord: [116.4074, 39.9042] },
  { name: '上海市', coord: [121.4737, 31.2304] },
  { name: '广州市', coord: [113.2644, 23.1291] },
  { name: '深圳市', coord: [114.0579, 22.5431] },
  { name: '杭州市', coord: [120.1551, 30.2741] },
  { name: '南京市', coord: [118.7969, 32.0603] },
  { name: '武汉市', coord: [114.3055, 30.5928] },
  { name: '成都市', coord: [104.0665, 30.5723] },
  { name: '西安市', coord: [108.9402, 34.3416] },
  { name: '重庆市', coord: [106.5516, 29.5630] },
  { name: '天津市', coord: [117.1901, 39.1235] },
  { name: '苏州市', coord: [120.5853, 31.2989] },
  { name: '青岛市', coord: [120.3826, 36.0671] },
  { name: '大连市', coord: [121.6147, 38.9140] },
  { name: '宁波市', coord: [121.5447, 29.8683] }
]

// 初始化地图
const initMap = () => {
  if (!mapContainer.value || !window.BMap) return

  // 创建地图实例
  map.value = new window.BMap.Map(mapContainer.value, {
    enableMapClick: false, // 禁用默认点击
    enableHighResolution: true // 启用高清
  })
  
  // 设置科技感的地图样式
  setTechMapStyle()
  
  // 设置中心点和缩放级别
  const point = new window.BMap.Point(props.center[0], props.center[1])
  map.value.centerAndZoom(point, props.zoom)
  currentZoom.value = props.zoom
  
  // 启用滚轮缩放
  map.value.enableScrollWheelZoom(true)
  
  // 添加自定义控件而不是默认控件
  addTechControls()
  
  // 添加标记点
  addTechMarkers()
  
  // 监听地图移动事件
  map.value.addEventListener('moveend', updateCurrentInfo)
  map.value.addEventListener('zoomend', updateCurrentInfo)
  
  // 初始化当前信息
  updateCurrentInfo()
  
  // 添加科技感动画效果
  addTechAnimations()
}

// 添加标记点
const addMarkers = () => {
  if (!map.value || !props.markers.length) return

  props.markers.forEach(marker => {
    const point = new window.BMap.Point(marker.position[0], marker.position[1])
    
    // 创建自定义图标
    const icon = new window.BMap.Icon(
      'data:image/svg+xml;base64,' + btoa(`
        <svg width="30" height="30" xmlns="http://www.w3.org/2000/svg">
          <circle cx="15" cy="15" r="10" fill="#67C23A" stroke="#ffffff" stroke-width="2"/>
          <circle cx="15" cy="15" r="5" fill="#ffffff"/>
        </svg>
      `),
      new window.BMap.Size(30, 30)
    )
    
    const baiduMarker = new window.BMap.Marker(point, { icon })
    
    // 添加标签
    const label = new window.BMap.Label(marker.name, {
      offset: new window.BMap.Size(20, -20)
    })
    label.setStyle({
      color: '#fff',
      backgroundColor: 'rgba(0, 0, 0, 0.7)',
      border: '1px solid #4F95FF',
      borderRadius: '4px',
      padding: '4px 8px',
      fontSize: '12px'
    })
    baiduMarker.setLabel(label)
    
    // 添加点击事件
    baiduMarker.addEventListener('click', () => {
      onMarkerClick(marker)
    })
    
    // 添加鼠标悬停事件
    baiduMarker.addEventListener('mouseover', () => {
      const infoWindow = new window.BMap.InfoWindow(`
        <div style="padding: 10px; min-width: 200px;">
          <h4 style="margin: 0 0 8px 0; color: #4F95FF;">${marker.name}</h4>
          <p style="margin: 4px 0;"><strong>装机容量:</strong> ${marker.capacity}</p>
          <p style="margin: 4px 0;"><strong>电池类型:</strong> ${marker.type}</p>
          <p style="margin: 4px 0;"><strong>城市:</strong> ${marker.city}</p>
        </div>
      `, {
        width: 220,
        height: 120,
        title: ''
      })
      baiduMarker.openInfoWindow(infoWindow)
    })
    
    map.value.addOverlay(baiduMarker)
  })
}

// 标记点点击事件
const onMarkerClick = (marker: any) => {
  currentCity.value = marker.city
  currentCoordinates.value = `${marker.position[0].toFixed(4)}°E, ${marker.position[1].toFixed(4)}°N`
  selectedCity.value = marker.city
  emit('markerClick', marker)
}

// 城市选择变化
const onCityChange = (cityName: string) => {
  const city = cities.find(c => c.name === cityName)
  if (city && map.value) {
    const point = new window.BMap.Point(city.coord[0], city.coord[1])
    map.value.panTo(point)
    map.value.setZoom(12)
    emit('cityChange', cityName)
  }
}

// 更新当前信息
const updateCurrentInfo = () => {
  if (!map.value) return
  
  const center = map.value.getCenter()
  const zoom = map.value.getZoom()
  currentZoom.value = zoom
  
  // 逆地理编码获取城市名称
  const geocoder = new window.BMap.Geocoder()
  geocoder.getLocation(center, (result: any) => {
    if (result && result.addressComponents) {
      currentCity.value = result.addressComponents.city || result.addressComponents.province
    }
  })
  
  currentCoordinates.value = `${center.lng.toFixed(4)}°E, ${center.lat.toFixed(4)}°N`
  
  // 计算最近的站点
  if (props.markers.length > 0) {
    let nearest = props.markers[0]
    let minDistance = getDistance(center.lat, center.lng, nearest.position[1], nearest.position[0])
    
    props.markers.forEach(marker => {
      const distance = getDistance(center.lat, center.lng, marker.position[1], marker.position[0])
      if (distance < minDistance) {
        minDistance = distance
        nearest = marker
      }
    })
    
    nearestStation.value = nearest.name
  }
}

// 计算两点之间的距离（简化版）
const getDistance = (lat1: number, lng1: number, lat2: number, lng2: number) => {
  const radLat1 = (lat1 * Math.PI) / 180
  const radLat2 = (lat2 * Math.PI) / 180
  const deltaLat = radLat1 - radLat2
  const deltaLng = ((lng1 - lng2) * Math.PI) / 180
  
  const distance = 2 * Math.asin(
    Math.sqrt(
      Math.pow(Math.sin(deltaLat / 2), 2) +
      Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(deltaLng / 2), 2)
    )
  ) * 6378.137 // 地球半径
  
  return distance
}

// 缩放控制
const zoomIn = () => {
  if (map.value) {
    map.value.zoomIn()
  }
}

const zoomOut = () => {
  if (map.value) {
    map.value.zoomOut()
  }
}

// 重置中心点
const resetCenter = () => {
  if (map.value) {
    const point = new window.BMap.Point(props.center[0], props.center[1])
    map.value.panTo(point)
    map.value.setZoom(props.zoom)
    currentZoom.value = props.zoom
  }
}

// 科技感动画效果
const addTechAnimations = () => {
  // 添加扫描线效果
  if (props.showScanning) {
    startScanningAnimation()
  }
  
  // 添加粒子效果
  if (props.showParticles) {
    startParticleAnimation()
  }
}

// 扫描线动画
const startScanningAnimation = () => {
  const scanningLine = document.querySelector('.scanning-line')
  if (scanningLine) {
    scanningLine.classList.add('active')
  }
}

// 粒子动画
const startParticleAnimation = () => {
  const particles = document.querySelectorAll('.particle')
  particles.forEach((particle, index) => {
    setTimeout(() => {
      particle.classList.add('animate')
    }, index * 200)
  })
}

// 设置科技感地图样式
const setTechMapStyle = () => {
  if (!map.value) return
  
  // 自定义地图样式 - 深色科技主题
  const techStyle = {
    styleJson: [
      {
        "featureType": "all",
        "elementType": "geometry",
        "stylers": {
          "hue": "#000000",
          "saturation": -100,
          "lightness": -70,
          "visibility": "on"
        }
      },
      {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": {
          "color": "#0a1a2aff",
          "visibility": "on"
        }
      },
      {
        "featureType": "land",
        "elementType": "geometry",
        "stylers": {
          "color": "#0f1c2eff",
          "visibility": "on"
        }
      },
      {
        "featureType": "road",
        "elementType": "geometry",
        "stylers": {
          "color": "#1a3a5aff",
          "visibility": "on"
        }
      },
      {
        "featureType": "building",
        "elementType": "geometry",
        "stylers": {
          "color": "#14283aff",
          "visibility": "on"
        }
      },
      {
        "featureType": "green",
        "elementType": "geometry",
        "stylers": {
          "color": "#0d2135ff",
          "visibility": "on"
        }
      }
    ]
  }
  
  map.value.setMapStyle(techStyle)
}

// 添加科技感控件
const addTechControls = () => {
  if (!map.value) return
  
  // 创建自定义缩放控件
  const ZoomControl = function() {
    this.defaultAnchor = window.BMAP_ANCHOR_TOP_LEFT
    this.defaultOffset = new window.BMap.Size(20, 20)
  }
  
  ZoomControl.prototype = new window.BMap.Control()
  ZoomControl.prototype.initialize = function(map) {
    const div = document.createElement('div')
    div.className = 'tech-zoom-control'
    div.innerHTML = `
      <div class="tech-zoom-btn" onclick="map.zoomIn()">+</div>
      <div class="tech-zoom-btn" onclick="map.zoomOut()">-</div>
    `
    map.getContainer().appendChild(div)
    return div
  }
  
  map.value.addControl(new ZoomControl())
}

// 添加科技感标记点
const addTechMarkers = () => {
  if (!map.value || !props.markers.length) return

  props.markers.forEach(marker => {
    const point = new window.BMap.Point(marker.position[0], marker.position[1])
    
    // 创建科技感图标
    const icon = createTechIcon(marker.type)
    const baiduMarker = new window.BMap.Marker(point, { icon })
    
    // 添加发光效果
    addGlowEffect(baiduMarker, marker.type)
    
    // 添加科技感标签
    addTechLabel(baiduMarker, marker)
    
    // 添加点击事件
    baiduMarker.addEventListener('click', () => {
      onMarkerClick(marker)
      showTechInfoWindow(baiduMarker, marker)
    })
    
    // 添加悬停效果
    baiduMarker.addEventListener('mouseover', () => {
      baiduMarker.setZIndex(1000)
      addHoverEffect(baiduMarker, marker.type)
    })
    
    baiduMarker.addEventListener('mouseout', () => {
      removeHoverEffect(baiduMarker, marker.type)
    })
    
    map.value.addOverlay(baiduMarker)
  })
}

// 创建科技感图标
const createTechIcon = (type: string) => {
  const colors = {
    '磷酸铁锂': '#67C23A',
    '三元锂': '#E6A23C',
    '铅炭电池': '#909399'
  }
  const color = colors[type as keyof typeof colors] || '#4F95FF'
  
  const svg = `
    <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%">
          <stop offset="0%" style="stop-color:${color};stop-opacity:1" />
          <stop offset="100%" style="stop-color:${color};stop-opacity:0.3" />
        </radialGradient>
        <filter id="glow">
          <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
          <feMerge>
            <feMergeNode in="coloredBlur"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
      </defs>
      <circle cx="20" cy="20" r="15" fill="url(#grad1)" stroke="${color}" stroke-width="2" filter="url(#glow)"/>
      <circle cx="20" cy="20" r="8" fill="${color}" stroke="#ffffff" stroke-width="1"/>
      <circle cx="20" cy="20" r="3" fill="#ffffff"/>
    </svg>
  `
  
  return new window.BMap.Icon(
    'data:image/svg+xml;base64,' + btoa(svg),
    new window.BMap.Size(40, 40)
  )
}

// 添加发光效果
const addGlowEffect = (marker: any, type: string) => {
  const colors = {
    '磷酸铁锂': 'rgba(103, 194, 58, 0.6)',
    '三元锂': 'rgba(230, 162, 60, 0.6)',
    '铅炭电池': 'rgba(144, 147, 153, 0.6)'
  }
  const color = colors[type as keyof typeof colors] || 'rgba(79, 149, 255, 0.6)'
  
  // 创建发光圈
  const glowDiv = document.createElement('div')
  glowDiv.className = 'marker-glow'
  glowDiv.style.cssText = `
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: ${color};
    filter: blur(10px);
    animation: glowPulse 2s infinite;
    pointer-events: none;
  `
  
  marker.glowElement = glowDiv
}

// 添加科技感标签
const addTechLabel = (marker: any, markerData: any) => {
  const label = new window.BMap.Label(markerData.name, {
    offset: new window.BMap.Size(25, -25)
  })
  
  label.setStyle({
    color: '#00ffff',
    backgroundColor: 'rgba(0, 10, 20, 0.9)',
    border: '1px solid #00ffff',
    borderRadius: '6px',
    padding: '6px 12px',
    fontSize: '12px',
    fontWeight: 'bold',
    boxShadow: '0 0 10px rgba(0, 255, 255, 0.5)',
    textShadow: '0 0 5px rgba(0, 255, 255, 0.8)',
    fontFamily: 'monospace'
  })
  
  marker.setLabel(label)
}

// 显示科技感信息窗口
const showTechInfoWindow = (marker: any, markerData: any) => {
  const content = `
    <div class="tech-info-window">
      <div class="window-header">
        <h4 class="station-name">${markerData.name}</h4>
        <div class="header-decoration"></div>
      </div>
      <div class="window-content">
        <div class="info-row">
          <span class="info-icon">⚡</span>
          <span class="info-text">装机容量: ${markerData.capacity}</span>
        </div>
        <div class="info-row">
          <span class="info-icon">🔋</span>
          <span class="info-text">电池类型: ${markerData.type}</span>
        </div>
        <div class="info-row">
          <span class="info-icon">📍</span>
          <span class="info-text">位置: ${markerData.city}</span>
        </div>
      </div>
      <div class="window-footer">
        <div class="footer-decoration"></div>
      </div>
    </div>
  `
  
  const infoWindow = new window.BMap.InfoWindow(content, {
    width: 280,
    height: 160,
    title: '',
    enableMessage: false
  })
  
  marker.openInfoWindow(infoWindow)
}

const addHoverEffect = (marker: any, type: string) => {
  // 悬停时的放大效果
  const icon = marker.getIcon()
  if (icon) {
    icon.setImageSize(new window.BMap.Size(45, 45))
  }
}

const removeHoverEffect = (marker: any, type: string) => {
  // 恢复原始大小
  const icon = marker.getIcon()
  if (icon) {
    icon.setImageSize(new window.BMap.Size(40, 40))
  }
}

// 监听标记点数据变化
watch(() => props.markers, () => {
  if (map.value) {
    // 清除现有标记
    map.value.clearOverlays()
    // 重新添加标记
    addMarkers()
  }
}, { deep: true })

onMounted(() => {
  // 等待百度地图API加载完成
  const checkBMap = () => {
    if (window.BMap) {
      initMap()
    } else {
      setTimeout(checkBMap, 100)
    }
  }
  checkBMap()
})

onUnmounted(() => {
  if (map.value) {
    map.value.removeEventListener('moveend', updateCurrentInfo)
    map.value.removeEventListener('zoomend', updateCurrentInfo)
  }
})
</script>

<style lang="scss" scoped>
// 科技感主题样式
.tech-theme {
  --tech-primary: #00ffff;
  --tech-secondary: #4F95FF;
  --tech-accent: #67C23A;
  --tech-bg-dark: rgba(0, 10, 20, 0.9);
  --tech-bg-medium: rgba(15, 28, 46, 0.8);
  --tech-border: rgba(0, 255, 255, 0.3);
  --tech-glow: rgba(0, 255, 255, 0.6);
  
  font-family: 'Courier New', monospace;
}

.baidu-map-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  
  .map-container {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
  }
  
  .tech-map {
    background: linear-gradient(135deg, #0a1429 0%, #1a2332 100%);
  }
}

// 科技感控制面板
.tech-controls {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
  
  .control-panel-header {
    position: relative;
    margin-bottom: 15px;
    
    .panel-title {
      background: linear-gradient(135deg, var(--tech-bg-dark), var(--tech-bg-medium));
      border: 1px solid var(--tech-border);
      border-radius: 8px 8px 0 0;
      padding: 12px 16px;
      position: relative;
      overflow: hidden;
      
      .title-text {
        color: var(--tech-primary);
        font-weight: bold;
        font-size: 14px;
        text-shadow: 0 0 10px var(--tech-glow);
        position: relative;
        z-index: 2;
      }
    }
    
    .panel-glow {
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--tech-primary), transparent);
      animation: panelScan 3s infinite;
    }
  }
  
  .control-content {
    background: linear-gradient(135deg, var(--tech-bg-dark), var(--tech-bg-medium));
    border: 1px solid var(--tech-border);
    border-radius: 0 0 8px 8px;
    padding: 16px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }
  
  .control-item {
    margin-bottom: 16px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .tech-select {
    .city-selector {
      width: 160px;
      
      :deep(.el-select__wrapper) {
        background: rgba(0, 20, 40, 0.8);
        border: 1px solid var(--tech-border);
        border-radius: 6px;
        
        .el-select__placeholder,
        .el-select__selected-item {
          color: var(--tech-primary);
          font-weight: bold;
        }
      }
      
      :deep(.el-select__suffix) {
        color: var(--tech-primary);
      }
    }
  }
  
  .tech-buttons {
    .control-group {
      display: flex;
      gap: 8px;
      
      .tech-btn {
        background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(0, 255, 255, 0.1));
        border: 1px solid var(--tech-border);
        color: var(--tech-primary);
        border-radius: 6px;
        transition: all 0.3s ease;
        
        &:hover {
          background: linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.2));
          box-shadow: 0 0 15px var(--tech-glow);
          transform: translateY(-2px);
        }
        
        &:active {
          transform: translateY(0);
        }
        
        &.zoom-in {
          border-color: rgba(103, 194, 58, 0.5);
          
          &:hover {
            box-shadow: 0 0 15px rgba(103, 194, 58, 0.6);
          }
        }
        
        &.zoom-out {
          border-color: rgba(230, 162, 60, 0.5);
          
          &:hover {
            box-shadow: 0 0 15px rgba(230, 162, 60, 0.6);
          }
        }
        
        &.reset {
          border-color: rgba(79, 149, 255, 0.5);
          
          &:hover {
            box-shadow: 0 0 15px rgba(79, 149, 255, 0.6);
          }
        }
      }
    }
  }
  
  .tech-stats {
    display: flex;
    gap: 16px;
    
    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 12px;
      background: rgba(0, 255, 255, 0.1);
      border: 1px solid var(--tech-border);
      border-radius: 6px;
      min-width: 60px;
      
      .stat-label {
        color: rgba(0, 255, 255, 0.7);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 4px;
      }
      
      .stat-value {
        color: var(--tech-primary);
        font-weight: bold;
        font-size: 16px;
        text-shadow: 0 0 10px var(--tech-glow);
      }
    }
  }
}

// 科技感信息面板
.tech-info {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
  min-width: 220px;
  
  .info-panel-header {
    position: relative;
    margin-bottom: 15px;
    
    .panel-title {
      background: linear-gradient(135deg, var(--tech-bg-dark), var(--tech-bg-medium));
      border: 1px solid var(--tech-border);
      border-radius: 8px 8px 0 0;
      padding: 12px 16px;
      position: relative;
      overflow: hidden;
      
      .title-text {
        color: var(--tech-primary);
        font-weight: bold;
        font-size: 14px;
        text-shadow: 0 0 10px var(--tech-glow);
        position: relative;
        z-index: 2;
      }
    }
    
    .panel-glow {
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--tech-primary), transparent);
      animation: panelScan 3s infinite;
    }
  }
  
  .info-content {
    background: linear-gradient(135deg, var(--tech-bg-dark), var(--tech-bg-medium));
    border: 1px solid var(--tech-border);
    border-radius: 0 0 8px 8px;
    padding: 16px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }
  
  .tech-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px;
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 6px;
    background: rgba(0, 255, 255, 0.05);
    transition: all 0.3s ease;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    &:hover {
      background: rgba(0, 255, 255, 0.1);
      border-color: rgba(0, 255, 255, 0.4);
      box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
    }
    
    .info-icon {
      margin-right: 12px;
      
      .icon-glow {
        display: inline-block;
        font-size: 16px;
        animation: iconPulse 2s infinite;
        filter: drop-shadow(0 0 5px var(--tech-glow));
      }
    }
    
    .info-data {
      display: flex;
      flex-direction: column;
      
      .info-label {
        color: rgba(0, 255, 255, 0.7);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 2px;
      }
      
      .info-value {
        color: var(--tech-primary);
        font-weight: bold;
        font-size: 12px;
        text-shadow: 0 0 10px var(--tech-glow);
      }
    }
  }
  
  .panel-decoration {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tech-primary), transparent);
    margin-top: 12px;
    animation: decorationGlow 2s infinite;
  }
}

// 粒子效果
.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  
  .particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--tech-primary);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 10px var(--tech-glow);
    
    &.animate {
      animation: particleFloat 8s infinite linear;
    }
  }
  
  // 生成不同位置的粒子
  @for $i from 1 through 20 {
    .particle-#{$i} {
      left: random() * 100%;
      top: random() * 100%;
      animation-delay: random() * 8s;
    }
  }
}

// 扫描线效果
.scanning-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tech-primary), transparent);
  opacity: 0;
  pointer-events: none;
  
  &.active {
    opacity: 1;
    animation: scanAnimation 4s infinite;
  }
}

// 科技感动画关键帧
@keyframes panelScan {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes decorationGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0);
  }
  10% {
    opacity: 1;
    transform: translateY(-20px) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(-100px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-120px) scale(0);
  }
}

@keyframes scanAnimation {
  0% {
    top: 0;
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

// 百度地图自定义控件样式
:global(.tech-zoom-control) {
  position: absolute;
  background: linear-gradient(135deg, var(--tech-bg-dark), var(--tech-bg-medium));
  border: 1px solid var(--tech-border);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  
  .tech-zoom-btn {
    width: 32px;
    height: 32px;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid var(--tech-border);
    border-radius: 6px;
    color: var(--tech-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      background: rgba(0, 255, 255, 0.2);
      box-shadow: 0 0 15px var(--tech-glow);
      transform: scale(1.05);
    }
    
    &:active {
      transform: scale(0.95);
    }
  }
}

// 科技感信息窗口样式
:global(.tech-info-window) {
  background: linear-gradient(135deg, var(--tech-bg-dark), var(--tech-bg-medium));
  border: 1px solid var(--tech-border);
  border-radius: 12px;
  padding: 16px;
  color: var(--tech-primary);
  font-family: monospace;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  
  .window-header {
    position: relative;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tech-border);
    
    .station-name {
      margin: 0;
      color: var(--tech-primary);
      font-size: 16px;
      font-weight: bold;
      text-shadow: 0 0 10px var(--tech-glow);
    }
    
    .header-decoration {
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 50px;
      height: 2px;
      background: linear-gradient(90deg, var(--tech-primary), transparent);
    }
  }
  
  .window-content {
    .info-row {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .info-icon {
        margin-right: 8px;
        font-size: 14px;
        filter: drop-shadow(0 0 3px var(--tech-glow));
      }
      
      .info-text {
        font-size: 12px;
        color: rgba(0, 255, 255, 0.9);
      }
    }
  }
  
  .window-footer {
    position: relative;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--tech-border);
    
    .footer-decoration {
      position: absolute;
      top: -1px;
      right: 0;
      width: 50px;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--tech-primary));
    }
  }
}
</style>